<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
const activeName = ref('first')
const handleClick = () => {}
/*
图表:
    echarts绘制图形
    1.下载并导入echarts
    2.准备具有宽高的容器
    3.初始化echarts实例
    4.准备数据
    5.实例.setOption(数据)
    vue3:setup
    // onBeforeMount onMounted 
    // onBeforeUpdate onUpdated 
    // onBeforUnmont onUnmounted
*/

// 挂载钩子函数
const pieRef = ref()
onMounted(() => {
  // 1.基于准备好的dom，初始化echarts实例
  const pieChart = echarts.init(pieRef.value)
  // 2. 指定配置项和数据
  var option = {
    width: 'auto',
    height: 'auto',
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
    radius: ['10%', '70%'],
    series: [
      {
        name: '面积模式',
        type: 'pie',
        radius: [30, 110],
        center: ['50%', '50%'],
        roseType: 'area',
        label: {
          fontsize: 10,
        },
        // 引导线调整
        labelLine: {
          // 连接扇形图线长
          length: 6,
          // 连接文字线长
          length2: 8,
        },
        data: [
          { value: 20, name: '云南' },
          { value: 26, name: '北京' },
          { value: 24, name: '山东' },
          { value: 25, name: '河北' },
          { value: 20, name: '江苏' },
          { value: 25, name: '浙江' },
          { value: 30, name: '四川' },
          { value: 42, name: '湖北' },
        ],
      },
    ],
  }
  //3.// 3. 配置项和数据给我们的实例化对象
  pieChart.setOption(option)
})
</script>

<template>
  <!-- 数据统计信息 -->
  <el-row :gutter="20">
    <el-col :span="6"
      ><div class="grid-content ep-bg-purple" />
      <el-card>
        <template #header> 总销售额 </template>
        <div class="num">
          <i class="iconfont icon-dingdandaifukuan color1"></i>
          <span>33,350</span>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6"
      ><div class="grid-content ep-bg-purple-light" />
      <el-card>
        <template #header> 访问量 </template>
        <div class="num">
          <i class="iconfont icon-elment color2"></i>
          <span>39,991</span>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6"
      ><div class="grid-content ep-bg-purple" />
      <el-card>
        <template #header> 总用户 </template>
        <div class="num">
          <i class="iconfont icon-yonghuguanli color3"></i>
          <span>12,211</span>
        </div>
      </el-card></el-col
    >
    <el-col :span="6"
      ><div class="grid-content ep-bg-purple-light" />
      <el-card>
        <template #header> 今日新增 </template>
        <div class="num">
          <i class="iconfont icon-yonghuguanli color4"></i>
          <span>12,322</span>
        </div>
      </el-card></el-col
    >
  </el-row>

  <!-- 图表 -->
  <el-tabs v-model="activeName" class="echarts" @tab-click="handleClick">
    <el-tab-pane label="饼状图" name="first">
      <div class="pie" ref="pieRef"></div>
    </el-tab-pane>
    <el-tab-pane label="线形图" name="second">线形图</el-tab-pane>
    <el-tab-pane label="柱状图" name="third">柱状图</el-tab-pane>
  </el-tabs>
</template>

<style scoped lang="scss">
//vue中的样式穿透  ,修改第三方组件内部的样式
//Vue3中 使用 ::v-deep(选择器) {样式}
::v-deep(.el-card__header) {
  border: 0;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.num {
  display: flex;
  align-items: center;
  font-size: 30px;
  span {
    margin-left: 20px;
  }
}

.iconfont {
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  text-align: center;
  line-height: 45px;
  font-size: 28px;
  color: #fff;
}
.color1 {
  background-color: #ff0067;
}
.color2 {
  background-color: #098afb;
}
.color3 {
  background-color: #000a01;
}
.color4 {
  background-color: #f90cff;
}
.echarts {
  padding: 32px;
  color: #6b778c;
  background-color: #fff;
  font-size: 32px;
  font-weight: 600;
  width: 100%;
  min-height: 600px;
}
.pie {
  width: 800px;
  height: 600px;
  margin: auto;
  //   background-color: pink;
}
</style>
